<template>
	<view class="style-five">
		<view v-if="list.length != 0">
			<app-head-navigation @click='setActive' :list="menu" :active="activeIndex"></app-head-navigation>
		</view>
		<app-product-list :isShowAttr="false" v-if="goods_list.length > 0" @routeGo="route_go"
			:goods_list="goods_list"></app-product-list>
		<view v-else class="no-empty main-center">
			<app-no-goods background="#f7f7f7" title="该分类下无相关内容哦~"></app-no-goods>
		</view>

	</view>
</template>

<script>
	import appHeadNavigation from '../../components/page-component/app-head-navigation/app-head-navigation.vue';
	import appProductList from '../../components/page-component/app-product-list/app-product-list.vue';
	import appNoGoods from '../../components/page-component/app-no-goods/app-no-goods.vue';
	import {
		mapState
	} from "vuex";

	export default {
		name: "style-five",
		data() {
			return {
				value: {},
				chlidCur: 0,
				childId: 0,
			}
		},
		components: {
			'app-head-navigation': appHeadNavigation,
			'app-product-list': appProductList,
			'app-no-goods': appNoGoods
		},

		props: [`activeIndex`, `goods_list`, `menu`],

		methods: {
			setId(ids) {
				this.chlidCur = ids
				this.setNav({
					it: this.list[ids].child.length > 0 ? this.list[ids].child[0] : this.list[ids],
					key: 0
				})
			},
			setActive(index) {
				// console.log(2);
				this.$emit('setActive', index);
			},
			setNav({
				it,
				key
			}) {
				this.$emit('setNav', {
					item: it,
					index: key
				});
			},
			route_go(e) {
				// #ifndef MP-BAIDU
				if (e.video_url && this.getVideo == 1) {
					// #ifdef MP
					uni.navigateTo({
						url: `/pages/goods/video?goods_id=${e.id}&sign=${e.sign}`
					});
					// #endif
					// #ifdef H5
					uni.navigateTo({
						url: e.page_url
					});
					// #endif
				} else {
					uni.navigateTo({
						url: e.page_url
					});
				}
				// #endif

				// #ifdef MP-BAIDU
				uni.navigateTo({
					url: e.page_url
				});
				// #endif
			}
		},
		created() {
			if (uni.getStorageSync('listItem')) {
				const data = uni.getStorageSync('listItem')
				this.value = JSON.parse(data)
				uni.removeStorageSync('listItem');
			}
		},
		computed: {
			themeObject: function() {
				return {
					back: this.theme + '-m-back ' + this.theme,
					theme: this.theme,
					color: this.theme + '-m-text ' + this.theme,
					sBack: this.theme + '-s-back ' + this.theme,
					mBtn: this.theme + '-m-gradient-btn ' + this.theme,
					sBtn: this.theme + '-s-gradient-btn ' + this.theme,
					border: this.theme + '-m-border ' + this.theme
				}
			},
			...mapState({
				platform: function(state) {
					return state.gConfig.systemInfo.platform;
				}
			}),
		}
	}
</script>

<style scoped lang="scss">
	.no-empty {
		background: #f7f7f7;
	}

	.title {
		margin: 40rpx 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		text {
			display: flex;
			align-items: center;

			&::before {
				display: inline-block;
				content: "";
				width: 6rpx;
				height: 1em;
				background-color: #0a1447;
				margin-right: 20rpx;
			}
		}

		image {
			width: 20rpx;
		}
	}

	.margin-fixed {
		// margin-top: #{188upx};
		background-color: #fff;
	}

	.nav {
		width: 100%;
		padding: #{24rpx};
		white-space: nowrap;
		background-color: #ffffff;
	}

	.head {
		position: fixed;
		top: calc(88upx + var(--window-top));
		left: 0;
		z-index: 1000;
	}

	.name {
		font-size: #{28rpx};
		padding: 0 #{28rpx};
		display: inline-block;
		height: #{54rpx};
		line-height: #{54rpx};
		margin-right: #{24rpx};
		border-radius: #{28rpx};
		margin-bottom: #{20rpx};
	}

	.default {
		color: #666666;
	}

	.active {
		color: #fff;
		background: #0a1447;
	}

	.u-loading-list {
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		color: #b0b0b0;
		font-size: 24upx;
	}
</style>